<template>
  <div>
    <div>
      <span class="btn" :class="show=='login' ? 'active' : '' " @click="show = 'login'">登录</span>
      /
      <span class="btn" :class="show=='reg' ? 'active' : '' " @click="show = 'reg'">注册</span>
    </div>
    <div>
      <login-form v-if="show == 'login'" @on-submit="login" ></login-form>
      <reg-form v-if="show == 'reg'" @on-submit="(form) => reg(form)"></reg-form>
    </div>
    <alert ref="alert"  ></alert>
  </div>
</template>

<script>
// import axios from 'Axios'
import loginForm from './components/login-form'
import regForm from './components/reg-form'
import alert from '@/components/alert'

import md5 from 'js-md5'

export default{
  components: {
    loginForm,
    regForm,
    alert,
  },
  data() {
    return {
      show: 'login',
      alert_msg: '',
      // username: 'admin',
      // password: '39c5841c3c6b8f795febbf143628ad94',
    }
  },
  methods: {
    login({ username, password, code }) {
      console.log('父组件的login方法')
      console.log('password', password)
      this.$request({
        url: '/admin/index/login',
        method: 'post',
        data: {
          username,
          password,
        },
      }).then((result) => {
        const res = result.data
        if (!res.status) {
          this.$refs.alert.showAlert(res.msg) // 自定义弹窗组件
          return
        } else {
          this.$message({
            message: res.msg,
            type: res.status ? 'success' : 'warning',
            duration: 2000,
          });
        }
        this.$router.push('/home')
      })
    },
    reg({ username, password }) {
      console.log('父组件的reg方法')
      const form = { username, password }
      console.log('注册内容', form)
    },
  }
}
</script>

<style>
.btn{
  cursor: pointer;
}
.active{
  color: blue;
}
</style>
